<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{background-color:#98d0f8; color: #fff; text-align:center; font-size:12px;}
            body>div{margin-top:30px;}
            body>div>ul{padding:0; margin:0 auto;overflow: hidden;width: 620px;}
            body>div>ul>li{width:120px; list-style:none; border-left:dotted 1px; float:left;}
            body>div>ul>li:last-child{border-right: dotted 1px;}    
		</style>
		<!--<script src="../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
			})
		</script>-->
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById('search').onclick = function(){
			    	var jsonp = document.createElement('script');
			    	jsonp.type = "text/javascript";
			    	jsonp.src = "http://wthrcdn.etouch.cn/weather_mini?callback=jsonpcallback&city=" + city.value.trim();
			    	document.head.appendChild(jsonp);
			    }
				
				
			}
		     function jsonpcallback(jsonObj) {
            if (jsonObj.status == 1000) {
                var jsonArray = jsonObj.data.forecast;
                var ul = document.createElement('ul');
                for (var i = 0; i < jsonArray.length; i++) {
                    var _data = jsonArray[i];
                    console.log(_data);
                    var li = document.createElement('li');
                    li.innerHTML = "<h4>" + _data.date + '</h4>';
                    var imgIndex;
                    switch (_data.type) {
                        case "多云":
                            imgIndex = 5;
                            break;
                        case "小雨":
                            imgIndex = 8;
                            break;
                        case "阵雨":
                            imgIndex = 11;
                            break;
                        default:
                            imgIndex = 1;
                            break;
                    }
                    li.innerHTML += "<img src='img/" + imgIndex + ".png' />";
                    li.innerHTML += "<p>" + _data.type + "</p>";
                    li.innerHTML += "<p>" + _data.high.replace('高温', '') + " - " + _data.low.replace('低温', '') + "</p>";
                    li.innerHTML += "<p>" + _data.fengli + "</p>";
                    li.innerHTML += "<p>" + _data.fengxiang + "</p>";
                    ul.appendChild(li);
                }
                container.innerHTML = "";
                container.appendChild(ul);
            } else {
                container.innerHTML = "你输入的城市不存在，请确认后重新输入！";
            }
        }
			
			
		</script>
		
	</head>
	<body>
		<input type="text" name="" id="city" value="" />
		<input type="button" name="" id="search" value="查询" />
		<div id="container">
			
		</div>
	</body>
</html>
